<template>
	<view class="index">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon dFlex jStart_aCenter">
					<view class="titLogo imgPublic">
						<image src="../static/images/logo.png" mode="widthFix"></image>
					</view>
					<view class="searchIcon" @click='goPage(1)'>
						<u-icon name="search" size='24' color='#ffffff'></u-icon>
					</view>
				</view>
				<view class="title"></view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<view class="banner">
			<u-swiper :list="banner" keyName="img" :autoplay="true" :height='swHeight' :indicator='true'></u-swiper>
		</view>
		<view class='container'>
			<!-- 元宇宙展厅 -->
			<!-- <view class="vr imgPublic" @click='goPage(3)' v-if='metaverse'> 
				<image src="../static/images/yyzzt@3x.png" mode="widthFix"></image>
			</view>	 -->
			<!-- 广告位 -->
			<view class='advertise dFlex jBetween_aStart'>
				<!-- @click='goPage(2,0,advInfo.id)' --> 
				<view class='ggw imgPublic' @click='goPage(3)'>
					<image :src="advInfo.main_img" mode="widthFix"></image>
				</view>
				<view class="recommend">
					<view class="tits dFlex jBetween_aCenter">
						<view class="titIcon imgPublic">
							<image src="../static/images/jrjx@3x.png" mode="widthFix"></image>
						</view>
						<!-- <view class="titTime dFlex jCenter_aCenter">
							<view class="txt">限时抢</view>
							<view class="time"><u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down></view>
						</view> -->
					</view>
					<view class="recommedShops">
						<view class="shopLine dFlex jBetween_aCenter">
							<view class="shopOne imgPublic" @click="goPage(2,0,comment[0].id)">
								<image :src="comment[0].main_img" mode="widthFix"></image>
							</view>
							<view class="shopOne imgPublic" v-if='comment.length >= 1' @click="goPage(2,0,comment[1].id)">
								<image :src="comment[1].main_img" mode="widthFix"></image>
							</view>
						</view>
						<view class="shopLine dFlex jBetween_aCenter">
							<view class="shopOne imgPublic" v-if='comment.length >= 2' @click="goPage(2,0,comment[2].id)">
								<image :src="comment[2].main_img" mode="widthFix"></image>
							</view>
							<view class="shopOne imgPublic" v-if='comment.length >= 3' @click="goPage(2,0,comment[3].id)">
								<image :src="comment[3].main_img" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<navigator hover-class="none" url='/index/shopList' class="lookMore dFlex jEnd_aCenter">
						查看更多	<u-icon name="arrow-right-double"></u-icon>
					</navigator>
				</view>
			</view>	
			<!-- 为你推荐 -->
			<view class="shops">
				<view class="titles dFlex jCenter_aCenter">
					<view class="line"></view>
					<view class="showTit">为你推荐</view>
					<view class="line"></view>
				</view>
				<view class="list dFlex jBetween_aStart fWap">
					<view class="shopOne" v-for="(item,index) in shop" :key='index' @click='goPage(2,0,item.id)'>
						<view class="shopImg imgPublic dFlex jCenter_aCenter">
							<image :src="item.main_img" mode="widthFix"></image>
						</view>
						<view class="shopInfo">
							<view class="shopName">{{item.title}}</view>
							<view class="intro">{{item.description?item.description:'暂无相关介绍'}}</view>
							<view class="config dFlex jBetween_aCenter">
								<view class="showPrice">
									<view class="price dFlex jStart_aCenter">
										<view class="newPrice">¥{{item.price?item.price:'0.00'}}</view>
										<view class="oldPrice">¥{{item.old_price?item.old_price:'0.00'}}</view>
									</view>
									<view class="sale">已售：{{item.salenum?item.salenum:0}}</view>
								</view>
								<view class="carIcon imgPublic">
									<image src="../static/images/hgwc@3x.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</view>
</template>

<script>
	import {
		indexAdv,getGoodsList
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#ff0000',
				},
				
				device:uni.getSystemInfoSync().osName,
				swHeight:'',
				banner:[],//轮播图
				advInfo:'',//左侧广告位
				metaverse:'',//元宇宙地址
				comment:[],//今日推荐
				shop:[],//为你推荐商品
			};
		},
		onShow(){
			// 轮播图 元宇宙 左侧广告位
			this.initConfig();
			// 今日精选
			this.initComment(4);
			// 为你推荐
			this.initComment(8);
		},
		onShareAppMessage() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		onShareTimeline() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		methods:{
			// 今日推荐
			async initComment(status){
				let res = null;
				if(status == '4'){
					res = await getGoodsList({
						orderby:'id',
						ordertype:"desc",
						page:1,
						pageSize:4
					});
					if(res){
						this.comment = res;
					}
				}else{
					res = await getGoodsList({
						orderby:'sort',
						ordertype:"desc",
						page:1,
						pageSize:8
					});
					if(res){
						this.shop = res;
					}
				}
			},
			// 非商品数据
			async initConfig(){
				let res = await indexAdv({}).then(res=>{
					if(res){
						this.banner = res.banner.length ? res.banner : [];
						this.calcHeight();
						this.advInfo = res.advinfo;
						this.metaverse = res.Metaverse;
					}
				}).catch((err)=>{
					console.log(err)
				})
			},
			// 计算轮播图高度
			calcHeight(){
				uni.getImageInfo({
					src:this.banner[0].img,
					success: (info) => {
						let rate = info.width / info.height;
						this.swHeight = uni.getSystemInfoSync().windowWidth * 0.948 / rate;
					},
					fail:(err) => {
						console.log(err);
					}
				})
			},
			// 页面跳转
			goPage(idx,status = 0,config){
				if(status){
					
				}
				if(idx == '1'){
					uni.navigateTo({
						url:'/index/shopList',
					})
				}else if(idx == '2'){ //商品详情
					uni.navigateTo({
						url:'/index/shopDetail?id='+config,
					})
				}else if(idx == '3'){//元宇宙展厅
					uni.navigateTo({
						url:'/index/vr?url='+this.metaverse,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: 100%;
		margin-top: 30rpx;
		.shops{
			width: 100%;
			.list{
				width: 100%;
				.shopOne{
					width: 48%;
					border-radius: 4px;
					box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
					margin-bottom: 12px;
					background:white;
					.shopInfo{
						width: 100%;
						padding: 8px 8px 15px;
						box-sizing: border-box;
						.config{
							width: 100%;
							.showPrice{
								flex: 1;
								.price{
									width: 100%;
									.newPrice{
										color: rgb(277, 37, 37);
										font-size: 15px;
										font-weight: bold;
									}
									.oldPrice{
										color:#808080;
										font-size: 12px;
										margin-left: 8px;
										text-decoration: line-through;
									}
								}
								.sale{
									font-size: 12px;
									margin-top: 3px;
									color:#808080;
								}
							}
							.carIcon{
								width: 25px;
								margin-left: 12px;
							}
						}
						.intro{
							width: 100%;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							overflow: hidden;
							font-size: 12px;
							margin:4px 0 6px;
							color: #808080;
						}
						.shopName{
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-weight: bold;
						}
					}
					.shopImg{
						width: 100%;
						height: 45.5vw;
						border-radius: 5px;
						overflow: hidden;
						// max-height: 45.5vw;
						overflow: hidden;
					}
				}
			}
			.titles{
				width: 100%;
				font-weight: bold;
				margin-bottom:12px;
				.line{
					width: 50px;
					height: 0;
					border-top: 1px solid #808080;
					margin: 0 15px;
				}
			}
		}
		.advertise{
			width: 100%;
			margin:30rpx 0 60rpx;
			border-radius: 6px;
			background: white;
			box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
			.recommend{
				flex: 1;
				padding:15px 10px;
				box-sizing: border-box;
				.lookMore{
					width: 100%;
					color:#808080;
					font-size: 12px;
				}
				.recommedShops{
					width: 100%;
					margin-bottom: 8px;
					.shopLine{
						width: 100%;
						padding: 12px 0;
						border-bottom: 1px dashed #808080;
						.shopOne{
							width:20vw;
							border-radius: 5px;
							max-height: 19vw;
						}
					}
				}
				.tits{
					width: 100%;
					.titTime{
						width: fit-content;
						font-size: 10px;
						border: 1px solid #1362C9;
						// border-radius: 5px;
						// border-top-left-radius: 10px;
						.time{
							background: #1362C9;
							.u-count-down__text{
								font-size: 10px;
								color: white;
								padding: 3px 6px;
								line-height: inherit;
							}
						}
						.txt{
							display: inline-block;
							padding: 2px 6px;
							background: white;
						}
					}
					.titIcon{
						width: 95rpx;
					}
				}	
			}
			.ggw{
				width: 50%;
			}
		}
	}
	.adv{
		position: relative;
		
	}
	.index{
		width: 100%;
		height: 100%;
		background-image: url("");
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding:0 2.6%;
		box-sizing: border-box;
		.ios_pageTitle,.and_pageTitle{
			position: relative;
			.backIcon {
				width:auto;
				font-size:14px;
				color:white;
			}
			.titLogo{
				width: 60px;
				margin-right:8px;
				image{
					border-radius: 0!important;
				}
			}
		}
		.banner{
			width: 100%;
			margin-top: 6px;
		}
	}
	page{
		height: 100%;
	}
</style>
